<template>
	<div class="role">
		<div class="title">
			<div class="key">
				<el-form>
					<el-row :gutter="12">
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="位 置">
								<el-select v-model="localtion" clearable @change="search" style="width: 70%;" placeholder="请选择位置">
									<el-option
										v-for="(item,index) in localtionOptions"
										:key="index"
										:label="item.name"
										:value="item.name">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="状态">
								<el-select v-model="status" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
									<el-option label="空闲" :value="0"></el-option>
									<el-option label="正在使用" :value="1"></el-option>
									<el-option label="借出待确认" :value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="责任人">
								<el-select v-model="own" clearable @change="search" style="width: 70%;" placeholder="请选择责任人">
									<el-option
										v-for="(item,index) in own_list"
										:key="index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="借用人">
								<el-select v-model="receiveUser" clearable @change="search" style="width: 70%;" placeholder="请选择借用人">
									<el-option
										v-for="(item,index) in receive_list"
										:key="index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>

							</el-form-item>
						</el-col>

					</el-row>
				</el-form>
			</div>
			<div>
				<el-row :gutter="10">
					<el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21">
						<span>关键字:</span>
						<el-input v-model="keywords" clearable placeholder="请输入关键字名称/型号" style="width: 42%;" @change="search"></el-input>
						<el-button type="primary" @click="search">查询</el-button>
					</el-col>
					<el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="2" v-if="power.includes('test_device_type_add')">
<!--						<el-button type="primary" @click="addForm">新增</el-button>-->
						<div style="display: flex;">
							<el-button type="success" @click="down">导 出</el-button>
							<el-button type="primary" @click="addForm">登 记</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList.slice((current-1)*size, current*size)"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}"
				lazy
				row-key="id">
				<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
				<el-table-column align="center" property="name" label="设备名称" width="200"></el-table-column>
				<el-table-column align="center" property="type" label="设备类型" width="150"></el-table-column>
				<el-table-column align="center" property="model" label="设备型号" width="150"></el-table-column>
				<el-table-column align="center" property="manufactor" label="品牌" width="150"></el-table-column>
				<el-table-column align="center" property="localtion" label="位置" width="150"></el-table-column>
				<el-table-column align="center" property="status" label="状态" width="150">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0" effect="dark">空闲</el-tag>
						<el-tag v-if="scope.row.status == 1" type="success" effect="dark">正在使用</el-tag>
						<el-tag v-if="scope.row.status == 2" type="info" effect="dark">借出待确认</el-tag>
						<el-tag v-if="scope.row.status == 3" type="warning" effect="dark">已寄回</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" property="buy_time" label="购买时间" width="200">
					<template slot-scope="scope">
						<span>{{getTime(scope.row.buy_time)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="own" label="责任人" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.own)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="recevie" label="借用人" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.recevie)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="create_time" label="创建信息" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}</span><br>
						<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" fixed="right" width="200">
					<template slot-scope="scope">
						<span><a @click="toDetails(scope.row)">查看</a></span>
						<span><a > | </a></span>
						<span v-if="scope.row.can_sign == 1"><a >
							  <template>
								<el-popconfirm title="确认接收吗？" @confirm="sign(scope.row)">
									<span slot="reference" >接收确认</span>
								</el-popconfirm>
							  </template>
						  </a></span>
						<span v-if="scope.row.can_sign == 1"><a > | </a></span>
						<el-dropdown :hide-on-click="false">
							  <span class="el-dropdown-link">
								<a >更多<i class="el-icon-arrow-down el-icon--right"></i></a>
							  </span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-if="scope.row.can_godown">
									<a>
										<template>
											<el-popconfirm title="确认入库吗？" @confirm="godown(scope.row)">
												<span slot="reference" class="del">入库</span>
											</el-popconfirm>
										</template>
									</a>
								</el-dropdown-item>
								<el-dropdown-item>
									<a @click="toBianji(scope.row)"
									   :disabled="!power.includes('order_update')">
										编辑
									</a>
								</el-dropdown-item>
								<el-dropdown-item>
									<a @click="receive(scope.row)" v-if="scope.row.can_transfer == 1">借出</a>
								</el-dropdown-item>
								<el-dropdown-item><a @click="recode(scope.row)">操作记录</a></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center;margin-top: 10px;height: 180px;"
				:total="tableTotal">
			</el-pagination>
		</div>
		<addForm ref="addForm"></addForm>
		<lineForm ref="lineForm"></lineForm>
		<receiveForm ref="receiveForm"></receiveForm>
	</div>
</template>

<script>

import { device, deviceSign, deviceOptions, deviceGodown } from '@/api/user'
import addForm from "./model/addForm";
import lineForm from "./model/line";
import receiveForm from './model/receiveForm'
import axios from "axios";
import { getHeaderName } from '@/app.config'

export default {
	name: 'product',
	components:{
		addForm,
		lineForm,
		receiveForm
	},
	data(){
		return {
			value: '',
			size: 10,
			current: 1,
			tableTotal: 1,
			initTableList: [],
			keywords:'',
			tableSize:10,
			tableCurrent:1,
			localtion:'',
			status:'',
			own:'',
			receiveUser:'',
			localtionOptions:[],
			own_list:[],
			receive_list:[],
			groupidOptions:[],
			power:[],
			pending:false
		}
	},
	created() {
		this.pending = this.$route.query.pending
		this.initTable()
	},
	methods:{
		// 设备入库
		godown(data){
			deviceGodown(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.initTable()
				}else {
					this.$message.error(res.message)
				}
			})
		},
		// 下载设备列表结果
		down() {
			let path = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/device/export`
			axios.get(path,{
				responseType: 'blob',
				headers: getHeaderName()
			}).then(res => {
				if(res.status === 200) {
					const blob = new Blob([res.data]);
					const fileName = `设备列表.xls`;
					// for IE
					if (window.navigator && window.navigator.msSaveOrOpenBlob) {
						window.navigator.msSaveOrOpenBlob(blob, fileName)
					} else {
						// for Non-IE (chrome, firefox etc.)
						const elink = document.createElement('a');
						elink.download = fileName;
						elink.style.display = 'none';
						elink.href = URL.createObjectURL(blob);
						document.body.appendChild(elink);
						elink.click();
						URL.revokeObjectURL(elink.href);
						document.body.removeChild(elink);
						this.loading = false
						this.$message({
							type:"success",
							message:"导出成功!"
						})
					}
				} else {
					this.loading = false
					this.$message.error('下载出错了!');
				}
			}).catch((err) => {
				console.log(err.message);
			});
		},
		search(){
			device({
				keywords:this.keywords,
				localtion:this.localtion,
				status:this.status,
				own:this.own,
				receiveUser:this.receiveUser
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			device({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}

			})
		},
		initTable(){
			this.localtionOptions = []
			device({
				pending:this.pending
			}).then(response => {
				if(response.code == 200){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
			deviceOptions().then(res => {
				res.data.localtion_list.filter(item => {
					this.localtionOptions.push({name:item})
				})
				this.own_list = res.data.own_list
				this.receive_list = res.data.receive_list
				console.log(res,12121)
			})
		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());

			return resDate
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		// 操作记录
		recode(data){
			this.$refs.lineForm.dialogFormVisible = true
			this.$refs.lineForm.initData(4,data)
		},
		// 借出
		receive(data){
			this.$refs.receiveForm.dialogFormVisible = true
			this.$refs.receiveForm.initData(4,data)
		},
		// 确认接收
		sign(data){
			deviceSign(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.initTable()
				} else {
					this.$message.error('无权限操作！')
				}
			})
			this.initTable()
		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		},
		toBianji(data){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(2,data)
		},
		toDetails(data){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(3,data)
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	min-height: 1100px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}

}
.title{
	width: 100%;
	padding: 20px;
	background-color: #fff;
	margin: 5px 0;
}
/deep/ .cell .el-tag {
	margin: 2px 0;
}
</style>
